<template>
  <a-card :bordered="false" title="违规上报">
    <a-form :model="state.form" auto-label-width ref="formRef">
      <a-form-item
        field="ruleType"
        label="扣分类型"
        :rules="[{ required: true, message: '请选择扣分类型' }]"
      >
        <a-select @change="typeChange" v-model="state.form.ruleType">
          <a-option :value="1">个人扣分</a-option>
          <a-option :value="2">宿舍扣分</a-option>
          <a-option :value="3">部门扣分</a-option>
        </a-select>
      </a-form-item>

      <a-form-item
        field="ruleCode"
        label="违规事由"
        :rules="[{ required: true, message: '请选择违规事由' }]"
      >
        <a-select
          v-model="state.form.ruleCode"
          :disabled="state.form.ruleType === undefined"
        >
          <a-option
            v-model="state.form.ruleCode"
            v-for="item in state.ruleList"
            :value="item?.value"
          >
            {{ item?.name }}
          </a-option>
        </a-select>
      </a-form-item>

      <a-form-item
        field="eventTime"
        label="违规时间"
        :rules="[{ required: true, message: '请输入违规时间' }]"
      >
        <a-date-picker
          style="width: 100%"
          v-model="state.form.eventTime"
          show-time
          format="YYYY-MM-DD HH:mm:ss"
        />
      </a-form-item>

      <a-form-item
        field="employeeCode"
        label="学号"
        :rules="[{ required: true, message: '请输入学号' }]"
        v-if="state.form.ruleType === 1"
      >
        <a-input v-model="state.form.employeeCode" />
      </a-form-item>

      <a-form-item
        field="hotelOrgCode"
        label="宿舍"
        :rules="[{ required: true, message: '请选择宿舍' }]"
        v-if="state.form.ruleType === 2"
      >
        <a-cascader
          :options="state.hotelList"
          v-model="state.form.hotelOrgCode"
          placeholder="请选择宿舍"
          allow-search
        />
      </a-form-item>

      <a-form-item
        field="employeeOrgCode"
        label="部门"
        :rules="[{ required: true, message: '请选择部门' }]"
        v-if="state.form.ruleType === 3"
      >
        <a-cascader
          :options="state.orgList"
          v-model="state.form.employeeOrgCode"
          placeholder="请选择部门"
          allow-search
          check-strictly
        />
      </a-form-item>
      <a-form-item field="remark" label="备注">
        <a-textarea
          placeholder="请输入备注"
          v-model="state.form.remark"
          allow-clear
        />
      </a-form-item>
    </a-form>
    <a-button type="primary" long @click="submit">提交</a-button>
  </a-card>
</template>

<script lang="ts" setup>
import {
  useHotelListApi,
  useOrganizationListApi,
  useRatingRuleListApi,
  useRuleRecordCreateApi,
} from "@/api";
import { formatTree } from "@/utils/tree";
import { Message } from "@arco-design/web-vue";
import { ref, reactive, onMounted } from "vue";
const formRef = ref();
const emit = defineEmits(["refresh"]);
const useForm = () => {
  return {
    ruleType: 1,
    ruleCode: "",
    eventTime: "",
    remark: "",
    employeeCode: "",
    employeeOrgCode: "",
    hotelOrgCode: "",
  };
};

const state = reactive({
  form: useForm(),
  ruleList: [],
  orgList: [],
  hotelList: [],
});

onMounted(() => {
  getRuleList();
  getOrgList();
  getHotelList();
});

const getOrgList = () => {
  useOrganizationListApi({}).then(({ data }) => {
    data = data?.map((item) => {
      return {
        ...item,
        label: item.name,
        value: item.code,
      };
    });
    let tree = formatTree(data, "");
    state.orgList = tree;
  });
};
const getHotelList = () => {
  useHotelListApi({}).then(({ data }) => {
    data = data?.map((item) => {
      return {
        ...item,
        label: item.name,
        value: item.code,
      };
    });
    let tree = formatTree(data, "");
    state.hotelList = tree;
  });
};
const getRuleList = () => {
  useRatingRuleListApi({ ruleType: state.form.ruleType }).then(({ data }) => {
    state.ruleList = data?.map((item) => {
      return {
        ...item,
        label: item.name,
        value: item.code,
      };
    });
  }) || [];
};

const typeChange = (value) => {
  state.form.ruleCode = undefined;
  getRuleList();
};

const submit = () => {
  useRuleRecordCreateApi(state.form)
    .then((res) => {
      console.log(res, "res");
      Message.success("操作成功");
      state.form = useForm();
    })
    .catch(() => {
      Message.warning("操作失败");
    });
};
</script>
<style scoped lang="less"></style>
